<template>
    <!-- <div class="bodyContent"> -->
    <div id="container"></div>
    <!-- </div> -->
</template>

<script>
import axios from 'axios'
import AMapLoader from '@amap/amap-jsapi-loader'
window._AMapSecurityConfig = {
    securityJsCode: 'dd6d2354204cdfa58dba988417e31cf5'
}
export default {
    name: 'MapContainerTest',
    data() {
        return {
            mapObj: null,
            map: null,
            markers: [],
            infoWindow: null,
            tipmsg: 'ceshhi',
            path: [],
            polyline: null,
            bounds: null,
            markerStart: null,
            markerEnd: null,
            icon:null,
            markerList:null,
            lineArr:[],
            dataList:[],
            autoOptions: {
                input: ''
            },
            auto: null,
        }
    },
    methods: {
        initMap() {
            AMapLoader.load({
                key: "74f140887d15475e36ecea39c4a583bc",             // 申请好的Web端开发者Key，首次调用 load 时必填
                version: "2.1Beta",      // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
                plugins: ['AMap.PlaceSearch', 'AMap.AutoComplete', 'AMap.ControlBar'],       // 需要使用的的插件列表，如比例尺'AMap.Scale'等
            }).then((AMap) => {
                this.mapObj = AMap;
                this.map = new AMap.Map("container", {  //设置地图容器id
                    viewMode: "3D",    //是否为3D地图模式
                    // terrain: true, // 开启地形图
                    zoom: 14,           //初始化地图级别
                    center: [104.065735, 30.659462], //初始化地图中心点位置
                    // mapStyle: 'amap://styles/whitesmoke',  //设置地图显示样式
                });
                // this.map.addControl(new AMap.PlaceSearch);
                // this.map.addControl(new AMap.AutoComplete);
                this.map.addControl(new AMap.ControlBar());
                this.map.on('complete', () => {
                    console.log('地图Test加载完成！')
                })
                //创建信息窗体
                this.infoWindow = new AMap.InfoWindow({
                    isCustom: true,  // 使用自定义窗体
                    content: `<div style="width:30px;height:20px;border-radius:3px;">${this.tipmsg}</div>`, // 信息窗体的内容可以是任意 html 片段
                    offset: new AMap.Pixel(16, -45)
                })
                this.auto = new AMap.AutoComplete(this.autoOptions);
            }).catch(e => {
                console.log(e);
            })
        },
        getSearchInfo(data) {
            this.autoOptions.input = data;
            console.log('地图组件接收到参数：', data)
        },
        onMarkerClick(e) {
            this.infoWindow.open(this.map, e.target.getPosition()); // 打开信息窗体
        },
        makersShow() {
            //创建icon
            // this.icon=new this.mapObj.Icon({
            //     size:new this.mapObj.Size(25,34),    //图片尺寸
            //     image:'//a.amap.com/jsapi_demos/static/demo-center/icons/dir-marker.png',  // Icon的图像
            //     imageOffset:new this.mapObj.Pixel(-9,-3),
            //     imageSize:new this.mapObj.Size(135,40)
            // });
            //添加标记点
            this.dataList.forEach(element=>{
                this.markers.push(new this.mapObj.Marker({position:element}))
            });
            // this.markers = [new this.mapObj.Marker({
            //     // position: [104.065735, 30.659462]
            //     position: new this.mapObj.LngLat(106.963818, 30.829241),
            //     offset:new this.mapObj.Pixel(-10,-10),
            //     icon:this.icon,
            //     // icon: '//vdata.amap.com/icons/b18/1/2.png',
            //     tite: '成都',
            //     zoom:13
            // }),
            // new this.mapObj.Marker({
            //     position: new this.mapObj.LngLat(116.481181, 39.989792),
            //     tite: '北京'
            // })]
            this.markers.forEach(element => {
                element.on('click', this.onMarkerClick);
            })
            this.map.add(this.markers);
        },
        polyLineShow() {
            //创建起点终点
            this.markerStart = new this.mapObj.Marker({
                position: new this.mapObj.LngLat(104.065747, 30.657475),
            });
            this.markerEnd = new this.mapObj.Marker({
                position: new this.mapObj.LngLat(104.066251, 30.642864)
            });
            this.map.add([this.markerStart, this.markerEnd]);
            //创建折线坐标
            this.path = [
                new this.mapObj.LngLat(104.065747, 30.657475),
                new this.mapObj.LngLat(104.065725, 30.658334),
                new this.mapObj.LngLat(104.067442, 30.658361),
                new this.mapObj.LngLat(104.067388, 30.656423),
                new this.mapObj.LngLat(104.071015, 30.656506),
                new this.mapObj.LngLat(104.071015, 30.655851),
                new this.mapObj.LngLat(104.070371, 30.654513),
                new this.mapObj.LngLat(104.068869, 30.652501),
                new this.mapObj.LngLat(104.073214, 30.649049),
                new this.mapObj.LngLat(104.075317, 30.64831),
                new this.mapObj.LngLat(104.075049, 30.647858),
                new this.mapObj.LngLat(104.074984, 30.64544),
                new this.mapObj.LngLat(104.07536, 30.642449),
                new this.mapObj.LngLat(104.074362, 30.642744),
                new this.mapObj.LngLat(104.068611, 30.642827),
                new this.mapObj.LngLat(104.066272, 30.64364),
                new this.mapObj.LngLat(104.066251, 30.642864),
            ];
            this.polyline = new this.mapObj.Polyline({
                path: this.path,
                borderWight: 2,  //线条宽度
                strokeColor: 'red', //线条颜色
                lineJoin: 'round',  //拐点处连接样式
                strokeOpacity: 1,    //线条透明度
                strokeWeight: 6,     //轮廓宽度
                strokeStyle: 'dashed',  //轮廓线类型
            });
            this.map.add(this.polyline);
        },
        makersRemove() {
            this.map.remove(this.markers);
        },
        polyLineRemove() {
            this.map.remove([this.markerStart, this.markerEnd]);
            this.map.remove(this.polyline);
        },
        boundsFix() {
            var southWest = new this.mapObj.LngLat(110, 20);
            var northEast = new this.mapObj.LngLat(120, 30);
            this.bounds = new this.mapObj.Bounds(southWest, northEast);
            this.map.setBounds(this.bounds);
        },
        mapDestroy() {
            this.map.destroy();
        },
        animationLineShow(){
            this.mapObj.plugin('AMap.MoveAnimation', () => {
                this.lineArr = [
                    [104.065747, 30.657475],
                    [104.065725, 30.658334],
                    [104.067442, 30.658361],
                    [104.067388, 30.656423],
                    [104.071015, 30.656506],
                    [104.071015, 30.655851],
                    [104.070371, 30.654513],
                    [104.068869, 30.652501],
                    [104.073214, 30.649049],
                    [104.075317, 30.64831],
                    [104.075049, 30.647858],
                    [104.074984, 30.64544],
                    [104.07536, 30.642449],
                    [104.074362, 30.642744],
                    [104.068611, 30.642827],
                    [104.066272, 30.64364],
                    [104.066251, 30.642864]
                ]
                this.markerList = new this.mapObj.Marker({
                    map: this.map,
                    position: [104.065747, 30.657475],
                    icon: "https://a.amap.com/jsapi_demos/static/demo-center-v2/car.png",
                    offset: new this.mapObj.Pixel(-10, -20),
                });
                // 绘制轨迹
                var polyline = new this.mapObj.Polyline({
                    map: this.map,
                    path: this.lineArr,
                    showDir: true,
                    strokeColor: "#28F",  //线颜色
                    // strokeOpacity: 1,     //线透明度
                    strokeWeight: 6,      //线宽
                    // strokeStyle: "solid"  //线样式
                });
                var passedPolyline = new this.mapObj.Polyline({
                    map: this.map,
                    strokeColor: "#AF5",  //线颜色
                    strokeWeight: 6,      //线宽
                });
                this.markerList.on('moving', (e)=>{
                    passedPolyline.setPath(e.passedPath);
                    this.map.setCenter(e.target.getPosition(), true)
                });

                this.map.setFitView();
                // window.startAnimation = function startAnimation () {
                    // markerList.moveAlong(lineArr, {
                    //     // 每一段的时长
                    //     duration: 2000,//可根据实际采集时间间隔设置
                    //     // JSAPI2.0 是否延道路自动设置角度在 moveAlong 里设置
                    //     autoRotation: true,
                    // });
                // };
            })
        },
        animationStart() {
           this.markerList.moveAlong(this.lineArr, {
                        // 每一段的时长
                        duration: 2000,//可根据实际采集时间间隔设置
                        // JSAPI2.0 是否延道路自动设置角度在 moveAlong 里设置
                        autoRotation: true,
                    });
        },
        movePause(){
            this.markerList.pauseMove();
        },
        moveResume(){
            this.markerList.resumeMove();
        },
        getList(){
      axios({
        method:"GET",
        url:"http://192.168.10.175:48080/admin-api/LS/fireControlUnit/queryList",
        headers:{Authorization:"Bearer 65f98f33b70c413d92c5950948d04981"}
      }).then(
        response=>{
        //   console.log("返回数据为：",response)
        response.data.data.forEach(element=>{
            this.dataList.push([element.gisX,element.gisY])
          });
          console.log(this.dataList);
        },
        error=>{
          console.log('错误信息为：',error)
        }
      )
    }
    },
    mounted() {
        this.initMap();
    },
    created() {
        this.getList();

        this.$bus.$on('getSearchInfo', this.getSearchInfo);
        this.$bus.$on('makersShow', this.makersShow);
        this.$bus.$on('polyLineShow', this.polyLineShow);
        this.$bus.$on('makersRemove', this.makersRemove);
        this.$bus.$on('polyLineRemove', this.polyLineRemove);
        this.$bus.$on('boundsFix', this.boundsFix);
        this.$bus.$on('mapDestroy', this.mapDestroy);
        this.$bus.$on('animationLineShow',this.animationLineShow);
        this.$bus.$on('animationStart', this.animationStart);
        this.$bus.$on('movePause', this.movePause);
        this.$bus.$on('moveResume', this.moveResume);
    }
}
</script>

<style scoped>
.bodyContent {
    width: 100%;
}

#container {
    width: 1500px;
    height: 550px;
}
</style>